﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>幼教</title>
    <link type="text/css" href="../Layui/css/layui.css" rel="stylesheet" media="all">
    <style>
        body {
            margin: 10px;
            background: white;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }

        td {
            width: 10rem
        }

        .radius {
            border-radius: 50%;
            width: 2rem;
            height: 2rem
        }

        .layui-input-block {
            margin-left: 110px;
            min-height: 25px;
        }

        .layui-form-select .layui-input {
            padding-right: 30px;
            cursor: pointer;
            width: 182px;
        }

        .ant-fullcalendar-content {
            height: 15rem;
            overflow-y: auto;
            position: static;
            width: 10rem;
            left: auto;
            bottom: auto;
            float: left
        }
        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        ::-webkit-scrollbar {
            width: 8px;
            height: 16px;
            background-color: #F5F5F5;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            border-radius: 10px;
            background-color: #F5F5F5;
        }

        /*定义滑块 内阴影+圆角*/
        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #555;
        }

        .layui-form-select .layui-input {
            padding-right: 30px;
            cursor: pointer;
            width: 182px;
            height: 22px;
        }
    </style>
</head>
<body id="report-body">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>消课报表</legend>
    </fieldset>
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" id="el">
        <div class="layui-form">
            <div class="layui-form-item" style="float:right">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <h2>报表年度:{{year}}</h2>
                    </div>
                </div>
                <div class="layui-inline" id="year">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="indate" placeholder="请选择年份">
                    </div>
                </div>
                <div class="layui-inline" id="search">
                    <div class="layui-input-inline">
                        <button class="layui-btn layui-btn-normal">搜索</button>
                    </div>
                </div>
                <div class="layui-inline" id="operation">
                    <div class="layui-input-inline">
                        <button class="layui-btn layui-btn-normal" onclick="exportExcel('tableExcel')">导出</button>
                        <button class="layui-btn layui-btn-normal" onclick="doPrint()">打印</button>
                    </div>
                </div>
            </div>
            <div>
                <table class="layui-table" id="tableExcel">
                    <thead>
                        <tr>
                            <th>月数</th>
                            <th>此月上课会员</th>
                            <th>剩余总课时</th>
                            <th>本月消课</th>
                            <th>消课金额</th>
                            <th>剩余金额</th>
                            <th>旷课人数</th>
                            <th>活动人数</th>
                            <th>请假</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for=" (item,index) in dataList">
                            <td>{{item.month}}</td>
                            <td>数量:{{item.HContract.number}},金额:{{item.HContract.money}}</td>
                            <td>数量:{{item.NContract.number}},金额:{{item.NContract.money}}</td>
                            <td>数量:{{item.NMoney.number}},金额:{{item.NMoney.money}}</td>
                            <td>数量:{{item.TContract.number}},金额:{{item.TContract.money}}</td>
                            <td>数量:{{item.DContract.number}},金额:{{item.DContract.money}}</td>
                            <td>数量:{{item.GContract.number}},金额:{{item.GContract.money}}</td>
                            <td>数量:{{item.JContract.number}}</td>
                            <td>数量:{{item.JContract.number}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="../Htc/jQuery.print.min.js"></script>
    <script type="text/javascript" src="../Htc/jquery-1.11.2.min.js"></script>
    <script src="../Htc/tableToExcel.js"></script>
    <script type="text/javascript" src="../Htc/vue.min.js"></script>
    <script type="text/javascript" src="../Layui/layui.js"></script>
    <script>
        layui.use(['form', 'laydate', 'element'], function () {
            var laydate = layui.laydate;
            var form = layui.form;
            var element = layui.element;
            //年选择器
            laydate.render({
                elem: '#indate'
                , type: 'year'
            });
        });
    </script>
    <script>
        var vm = new Vue({
            el: '#el',
            data: {
                DataList: [],
                year: 2018,
                dataList: [
                    { "month": "一月", "HContract": { "number": "50", "money": "150" }, "NContract": { "number": "50", "money": "150" }, "NMoney": { "number": "50", "money": "150" }, "TContract": { "number": "50", "money": "150" }, "DContract": { "number": "50", "money": "150" }, "GContract": { "number": "50", "money": "150" }, "JContract": { "number": "50" } }
                    , { "month": "二月", "HContract": { "number": "50", "money": "150" }, "NContract": { "number": "50", "money": "150" }, "NMoney": { "number": "50", "money": "150" }, "TContract": { "number": "50", "money": "150" }, "DContract": { "number": "50", "money": "150" }, "GContract": { "number": "50", "money": "150" }, "JContract": { "number": "50" } }
                    , { "month": "五月", "HContract": { "number": "50", "money": "150" }, "NContract": { "number": "50", "money": "150" }, "NMoney": { "number": "50", "money": "150" }, "TContract": { "number": "50", "money": "150" }, "DContract": { "number": "50", "money": "150" }, "GContract": { "number": "50", "money": "150" }, "JContract": { "number": "50" } }
                    , { "month": "十月", "HContract": { "number": "50", "money": "150" }, "NContract": { "number": "50", "money": "150" }, "NMoney": { "number": "50", "money": "150" }, "TContract": { "number": "50", "money": "150" }, "DContract": { "number": "50", "money": "150" }, "GContract": { "number": "50", "money": "150" }, "JContract": { "number": "50" } }
                ],
            },
            created: function () {
            },
            methods: {
                LoadInfo: function () {
                    $.ajax({
                        data: '',
                        url: "../CReportform/ContractForm/DataList",
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            if (data.code == "0000") {
                                vm.DataList = data.data;
                            }
                            else if (data.code == "0009") {
                                layer.msg("参数为空！");
                            }
                            else if (data.code == "0001") {
                                layer.msg("您没有权限！");
                            }
                            else {
                                layer.msg("数据为空！");
                            }
                        }
                    })
                },
            }
        })
    </script>
</body>
</html>
